import { Component } from '@angular/core';

export class Tabs {
    heading: string;
    active: string;
}

@Component({
    selector: 'tabset',
    template: `
    <h1>{{title}}</h1>
	<div class="tabs">
        <ul>
            <li *ngFor="let tab of tabs; let i=index">
              <a [class.active]="tab.active" (click)="selected(tabs,i)">{{tab.heading}}</a>
            </li>
        </ul>
	</div>
	<div class="tboxs">
		<div class="tbox" [myTab]>tbox1</div>
		<div class="tbox" >tbox2</div>
		<div class="tbox" >tbox3</div>
	</div>
    `
}) //   (click)="tab.active = true"

export class AppComponent {
    //title = 'Tab标签切换';
	tindex = 0;

    tabs: Tabs[] = [
        { heading: 'tab1', active: 'active' },
        { heading: 'tab2', active: '' },
        { heading: 'tab3', active: '' },
        { heading: 'tab4', active: '' }
    ];

    selected(tabs: tabs, index: index) {
        for (let i = 0; i < tabs.length; i++) {
            tabs[i].active = false;
        }
        tabs[index].active = true;
    }
}
